<template>
  <div class="menu-test-static">
    <h2>静态菜单测试页面</h2>
    <div class="menu-tree">
      <h3>菜单结构预览：</h3>
      <div v-for="menu in menuList" :key="menu.id" class="menu-item">
        <div class="menu-level-1">
          <svg-icon :icon-class="menu.menuIcon" class="menu-icon-svg"></svg-icon>
          <span class="menu-name">{{ menu.menuName }}</span>
          <a :href="menu.menuUrl" class="menu-url" target="_blank">{{ menu.menuUrl }}</a>
          <span class="menu-children-count">({{ menu.children ? menu.children.length : 0 }} 个子菜单)</span>
        </div>
        <div v-if="menu.children && menu.children.length > 0" class="menu-children">
          <div v-for="child in menu.children" :key="child.id" class="menu-level-2">
            <svg-icon :icon-class="child.menuIcon" class="menu-icon-svg"></svg-icon>
            <span class="menu-name">{{ child.menuName }}</span>
            <a :href="child.menuUrl" class="menu-url" target="_blank">{{ child.menuUrl }}</a>
            <span v-if="child.children && child.children.length > 0" class="menu-children-count">
              ({{ child.children.length }} 个子菜单)
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getStaticMenus } from '@/config/menuConfig'

export default {
  name: 'MenuTestStatic',
  data() {
    return {
      menuList: []
    }
  },
  created() {
    this.loadMenuData()
  },
  methods: {
    loadMenuData() {
      try {
        this.menuList = getStaticMenus()
        console.log('静态菜单数据加载成功:', this.menuList)
      } catch (error) {
        console.error('加载静态菜单数据失败:', error)
      }
    }
  }
}
</script>

<style scoped>
.menu-test-static {
  padding: 20px;
}

.menu-tree {
  margin-top: 20px;
}

.menu-item {
  margin-bottom: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 10px;
}

.menu-level-1 {
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.menu-level-2 {
  margin-left: 20px;
  color: #666;
  margin-bottom: 4px;
}

.menu-icon-svg {
  margin-right: 8px;
  color: #409eff;
  width: 16px;
  height: 16px;
}

.menu-name {
  margin-right: 15px;
  font-weight: 500;
}

.menu-url {
  color: #409eff;
  font-size: 12px;
  font-family: monospace;
  text-decoration: none;
  margin-right: 15px;
}

.menu-url:hover {
  text-decoration: underline;
}

.menu-children-count {
  color: #409eff;
  font-size: 12px;
  font-weight: bold;
}
</style>
